<template>
<div class="box">
    <div class="pic-box">
        <img :src="login" alt />
    </div>
    <div class="login-box">
        <div class="logo-pic">
            <img :src="logo" alt />
        </div>
        <h1 class="title">阳光纪检监察智慧监督平台</h1>
        <el-form :model="ruleForm" :status-icon="false" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" @submit.native.prevent>
            <el-form-item label prop="loginName">
                <el-input type="loginName" v-model="ruleForm.loginName" placeholder="请输入账号"></el-input>
            </el-form-item>
            <el-form-item label prop="password">
                <el-input type="password" v-model="ruleForm.password" autocomplete="off" placeholder="请输入密码"></el-input>
            </el-form-item>
            <!--提示小字-->
            <div class="Tips-box">
                <el-checkbox v-model="checked">自动登录</el-checkbox>
                <el-button type="text" @click="deleteAllVisible = true">忘记密码</el-button>
            </div>
            <el-form-item>
                <el-button type="login" @click="submitForm('ruleForm')" :disabled="!ruleForm.loginName||!ruleForm.password" :class="[!ruleForm.loginName||!ruleForm.password? '':'color']" native-type="submit">登 录</el-button>
            </el-form-item>
            <div class="tip" v-if="isTrue">账号或密码错误，请重新输入</div>
        </el-form>
    </div>
    <!--忘记密码弹窗开始-->
    <el-dialog width="432px" title="忘记密码" :visible.sync="deleteAllVisible" :modal-append-to-body="false">
        <i>
            <img src="@/assets/image/Shape.png" alt />
        </i>
        <span>请直接联系管理员重置密码！</span>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="deleteAllVisible = false">确 定</el-button>
            <el-button type="cancel" @click="deleteAllVisible = false">取 消</el-button>
        </span>
    </el-dialog>
    <!--忘记密码弹窗结束-->
</div>
</template>

<script>
import login from "@/assets/image/login.png";
import logo from "@/assets/image/logo-login.png";
import {
    getVuexDta
} from "@/router/index.js"
export default {
    data() {
        var validatePass = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入密码"));
            } else {
                if (this.ruleForm.checkPass !== "") {
                    this.$refs.ruleForm.validateField("checkPass");
                }
                callback();
            }
        };
        var validatePass2 = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请再次输入密码"));
            } else if (value !== this.ruleForm.pass) {
                callback(new Error("两次输入密码不一致!"));
            } else {
                callback();
            }
        };
        return {
            //控制弹窗
            deleteAllVisible: false,
            //自动登陆按钮控制
            checked: false,
            //警用按钮控制
            disabled: true,
            //控制提示是否显示
            isTrue: false,
            login: login,
            logo: logo,
            ruleForm: {
                loginName: "",
                password: "",
            },
            rules: {
                loginName: [{
                    message: "请输入账号",
                    trigger: "blur"
                }],
                password: [{
                    message: "请输入密码",
                    trigger: "blur"
                }],
            },
        };
    },
    mounted() {
        this.getCookie();
    },

    methods: {
        //设置cookie
        setCookie(c_name, c_pwd, exdays) {
            var exdate = new Date(); //获取时间
            exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
            //字符串拼接cookie
            window.document.cookie =
                "loginName" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
            window.document.cookie =
                "password" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
        },
        //读取cookie
        getCookie: function () {
            if (document.cookie.length > 0) {
                var arr = document.cookie.split("; "); //这里显示的格式需要切割一下自己可输出看下
                // console.log(arr, "截取cookie第一次");
                for (var i = 0; i < arr.length; i++) {
                    var arr2 = arr[i].split("="); //再次切割
                    // console.log(arr, "截取cookie第二次");
                    //判断查找相对应的值
                    if (arr2[0] == "loginName") {
                        // console.log(arr2[1], "arr2[1]用户名");
                        this.ruleForm.loginName = arr2[1]; //保存到保存数据的地方
                    } else if (arr2[0] == "password") {
                        // console.log(arr2[1], "arr2[1]密码");
                        this.ruleForm.password = arr2[1];
                    }
                }
                this.checked = true;
                this.$nextTick(() => {
                    this.submitForm("ruleForm");
                });
            }
        },
        //清除cookie
        clearCookie: function () {
            this.setCookie("", "", -1); //修改2值都为空，天数为负1天就好了
        },
        //登陆按钮
        submitForm(formName) {
            var pass = this.$md5(this.ruleForm.password);
            // console.log(this.ruleForm.password, "原密码");
            // console.log(pass, "密码");
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // alert("submit!");
                    if (this.checked == true) {
                        //调用设置cookie的方法
                        //传入账号名，密码，和保存天数3个参数
                        this.setCookie(this.ruleForm.loginName, this.ruleForm.password, 7);
                        // console.log(this.ruleForm.loginName,this.ruleForm.password)
                    } else {
                        //清空Cookie
                        this.clearCookie();
                    }

                    //获取登陆接口
                    this.Api.getLoginIp({
                        loginName: this.ruleForm.loginName,
                        password: pass,
                    }).then((res) => {
                        // console.log(res, "后台返回token");
                        if (res.code !== "0") {
                            this.isTrue = true;
                            // console.log(this.isTrue);
                        } else if (res.code === "0") {
                            //将token保存到本地
                            console.log(res.data, "用户token")
                            localStorage.setItem("LoginToken", res.data);
                            // let Token = localStorage.getItem("LoginToken");
                            //登陆成功时将字典列表保存到本地区
                            this.Api.getDictionariesDropDown().then(res => {
                                let josnlist = res.data
                                let strjsonlist = JSON.stringify(josnlist)
                                localStorage.setItem('SET_DICTIONARIES', strjsonlist)
                            })
                            this.$router.push({
                                name: "index"
                            });
                        }
                    });
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
    },
};
</script>

<style lang="less" scoped>
.box {
    //登陆头图
    .pic-box {
        width: 100%;
        height: 540px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    //登陆的盒子
    .login-box {
        width: 700px;
        height: 520px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 3px 16px 7px rgba(0, 0, 0, 0.06);
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        flex-direction: column;
        // justify-content: center;
        align-items: center;
        padding: 20px 0 0 0;

        //   登陆图片
        .title {
            font-size: 34px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: rgba(0, 33, 64, 1);
            line-height: 48px;
            margin-top: 15px;
            margin-bottom: 30px;
        }

        /deep/.el-form {
            position: relative;

            //表单每一行
            .el-form-item {
                display: flex;
                justify-content: center;
                margin-bottom: 30px;

                //前面文字
                // .el-form-item__label {
                // }
                //输入框第一个盒子
                .el-form-item__content {
                    margin-left: 0 !important;

                    //输入框第二个盒子，控制输入框的大小
                    .el-input {
                        width: 360px;
                        height: 50px;
                        background: rgba(255, 255, 255, 1);

                        //输入框input本身，控制输入框的大小
                        .el-input__inner {
                            width: 360px;
                            height: 50px;
                            background: rgba(255, 255, 255, 1);
                            border: 1px solid rgba(221, 221, 221, 1);
                        }
                    }
                }
            }

            //登陆安妮
            .el-button--login {
                width: 360px;
                height: 50px;
                background: rgba(221, 221, 221, 1);
                border-radius: 4px;
                padding: 0;
                font-size: 18px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: rgba(255, 255, 255, 1);
                line-height: 25px;
                border: 0;

                span {
                    letter-spacing: 5px;
                }
            }

            //中间按钮
            .Tips-box {
                display: flex;
                justify-content: space-between;
                margin-bottom: 30px;

                //左
                /deep/.el-checkbox {
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: rgba(102, 102, 102, 1);
                    line-height: 20px;
                }

                //右
                /deep/.el-button--text {
                    padding: 0;
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: rgba(67, 130, 255, 1);
                    line-height: 20px;
                }
            }

            //验证失败时的提示文字
            .tip {
                width: 220px;
                height: 40px;
                background: rgba(255, 241, 240, 1);
                border-radius: 4px;
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: rgba(251, 54, 63, 1);
                text-align: center;
                line-height: 40px;
                position: absolute;
                left: 70px;
                bottom: 90px;
            }
        }

        /deep/.el-form .el-form-item:nth-child(2) {
            margin-bottom: 10px;
        }
    }
}

.color {
    background: rgba(61, 127, 255, 1) !important;
    border-radius: 4px !important;
}

//elementui 输入框获取焦点时边框颜色的定义
/deep/.el-input__inner:focus {
    border: 1px solid #4d7cfe !important;
}

//弹窗的样式
/deep/.el-button--deleteAll {
    width: 80px;
    height: 36px;
    background: rgba(255, 255, 255, 1);
    border-radius: 3px;
    border: 1px solid rgba(251, 54, 63, 1);
    padding: 0;
    color: #fb363f;
}

/deep/.el-dialog {
    margin-top: 19% !important;
    box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);
    border-radius: 4px;

    >.el-dialog__header {
        padding-left: 70px;
        padding-bottom: 0;

        >span {
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: rgba(0, 0, 0, 0.85);
            line-height: 24px;
        }
    }

    >.el-dialog__body {
        padding-left: 70px;
        padding-top: 12px;
        padding-bottom: 24px;
        position: relative;

        >i {
            position: absolute;
            left: 32px;
            top: -22px;
        }

        >span {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(102, 102, 102, 1);
        }
    }

    >.el-dialog__footer {
        .el-button--primary {
            width: 65px;
            height: 32px;
            background: rgba(22, 119, 255, 1);
            padding: 0;
            color: white;
        }

        .el-button--cancel {
            width: 65px;
            height: 32px;
            background: rgba(250, 250, 250, 1);
            border: 1px solid rgba(221, 221, 221, 1);
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(102, 102, 102, 1);
            padding: 0;
            margin-left: 8px;
        }
    }
}

/deep/.el-dialog {
    z-index: 2003 !important;
}
</style>
